<template>
	<view>
		<view class="tfc-list">
			<view 
				class="tfc-item"
				:class="{active: curTrafficinfo.alias === item.alias}"
				v-for="(item, index) in trafficList"
				:key="index"
				@click="handleChooseTraffic(item)"
			>{{item.name}}</view>
		</view>
		
		<view class="tfc_detail-wrap">
			<view class="travel_model-list">
				<view 
					class="travel_model-item"
					:class="{active: curTravelModel.alias === it_model.alias}"
					v-for="(it_model, in_model) in travelModelList"
					:key="in_model"
					@click="handleChooseTravelModel(it_model)"
				>{{it_model.name}}</view>
			</view>
			
			<view class="address-wrap">
				<view class="address_from">{{travelDetail.from}}</view>
				<view class="icon" @click="handleSwitchAddress"><image src="../../static/imgs/icons/switch-icon.png" mode=""></image></view>
				<view class="address_to">{{travelDetail.to}}</view>
			</view>
			
			<view class="date-wrap">
				<view class="date_go date">
					<view class="sts" v-if="curTravelModel.alias === 'toAndFor'">往</view>
					4月9日 今天
				</view>
				<view class="date_back date" v-if="curTravelModel.alias === 'toAndFor'">
					<view class="sts">返</view>
					4月9日 今天
				</view>
			</view>
			
			<view class="btn-wrap">搜索</view>
			
			<view class="search_history_list">
				<view 
					class="search_history_item"
					v-for="(it_search, in_search) in searchHistoryList"
					:key="in_search"
				>{{it_search}}</view>
				<view class="clear-btn">清除历史</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trafficList: [
					{
						name: '机场大巴',
						alias: 'bus'
					},{
						name: '拼车',
						alias: 'carpool'
					},{
						name: '包车',
						alias: 'Chartered'
					},{
						name: '租车',
						alias: 'rent'
					}
				],
				
				travelModelList: [
					{
						name: '单程',
						alias: 'oneWay'
					},{
						name: '往返',
						alias: 'toAndFor'
					}
				],
				
				curTrafficinfo: {name: '机场大巴',alias: 'bus'},
				
				curTravelModel: {name: '单程',alias: 'oneWay'},
				
				travelDetail: {
					from: '郑州',
					to: '郑州火车站西郑州火车站西',
					date: ''
				},
				
				searchHistoryList: ['郑州大学','新郑国际机场','郑州西站东站名', '新郑国际机场'],
				
			};
		},
		created() {
			this.$emit('handleChooseTraffic', this.curTrafficinfo);
			this.$emit('handleChooseTravelModel', this.curTravelModel);
		},
		methods: {
			handleChooseTraffic(item) {
				this.curTrafficinfo = item;
				this.$emit('handleChooseTraffic', item);
			},
			handleChooseTravelModel(item) {
				this.curTravelModel = item;
				this.$emit('handleChooseTravelModel', item);
			},
			handleSwitchAddress() {
				let temp = this.travelDetail.from;
				this.travelDetail.from = this.travelDetail.to;
				this.travelDetail.to = temp;
			}
		}
	}
</script>

<style lang="scss" scoped>
$blue: #00B4FF;
.tfc-list {
	display: flex;
	justify-content: space-evenly;
	padding: 30rpx 0;
	.tfc-item {
		font-size: 32rpx;
		font-weight: bold;
		&.active {
			color: $blue;
			position: relative;
			&::before {
				content: '';
				height: 6rpx;
				width: 36rpx;
				border-radius: 3rpx;
				background-color: $blue;
				position: absolute;
				bottom: -14rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
}

.tfc_detail-wrap {
	width: 690rpx;
	margin: 0 auto;
	box-shadow:0px 0px 14rpx 0px rgba(184,184,184,0.29);
	border-radius:12rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	.travel_model-list {
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-evenly;
		padding: 30rpx 0;
		border-bottom: 1px solid #EBEBEB;
		.travel_model-item {
			&.active {
				color: $blue;
			}
		}
	}
	
	.address-wrap {
		height: 113rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:36rpx;
		font-weight:bold;
		position: relative;
		border-bottom: 1px solid #EBEBEB;
		.address_from {
			width: 40%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
		.address_to {
			width: 40%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
		.icon {
			height: 48rpx;
			width: 48rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	
	.date-wrap {
		.date {
			height: 113rpx;
			display: flex;
			align-items: center;
			font-size:36rpx;
			font-weight:bold;
			border-bottom: 1px solid #EBEBEB;
			.sts {
				height: 40rpx;
				line-height: 40rpx;
				width: 40rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 24rpx;
				margin-right: 30rpx;
			}
		}
		.date_go {
			.sts {
				background-color: #FFF2E0;
				color: #FFAF3C;
			}
		}
		.date_back {
			.sts {
				background-color: #E0F5FF;
				color: #00B4FF;
			}
		}
	}
	
	.btn-wrap {
		width:523rpx;
		height:80rpx;
		line-height: 80rpx;
		margin: 50rpx auto 20rpx;
		background:linear-gradient(90deg,rgba(0,180,255,1),rgba(16,218,255,1));
		box-shadow:0px 0px 14rpx 0px rgba(0, 255, 180, 0.35);
		border-radius:40rpx;
		text-align: center;
		font-weight:500;
		font-size: 32rpx;
		color: #fff;
	}
	
	.search_history_list {
		font-weight:500;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 22rpx;
		.search_history_item {
			padding-right: 40rpx;
			padding-bottom: 20rpx;
			color:#666;
		}
		.clear-btn {
			color: #999;
		}
	}
}

</style>
